import { Button, Col, Input, Row, Space } from "antd";
import React, {
  ChangeEvent,
  forwardRef,
  useImperativeHandle,
  useState,
} from "react";

const initSearch = {
  companyName: "",
  contact: "",
  tel: "",
};

export interface searchParam {
  companyName: string;
  contact: string;
  tel: string;
}

interface SearchFormProps {
  searchData?: () => void;
  resetData?: () => void;
}

/**
 * 租户列表查询表单UI
 */
const SearchForm = (props: SearchFormProps, ref: any) => {
  const { searchData, resetData } = props;
  const [search, setSearch] = useState(initSearch);

  useImperativeHandle(ref, () => search);

  function handleSearchForm(event: ChangeEvent<HTMLInputElement>) {
    const inputName = event.target.name;
    const value = event.target.value;
    setSearch((search) => ({
      ...search,
      [inputName]: value,
    }));
  }

  function handleResetData() {
    setSearch(initSearch);
    if (resetData) {
      resetData();
    }
  }

  return (
    <Space className="fx" direction="vertical" size="middle">
      <Row gutter={24}>
        <Col span={8}>
          <div className="search-input">
            <span>企业名称：</span>
            <Input
              name="companyName"
              value={search.companyName}
              onChange={handleSearchForm}
            />
          </div>
        </Col>
        <Col span={8}>
          <div className="search-input">
            <span>联系人：</span>
            <Input
              name="contact"
              value={search.contact}
              onChange={handleSearchForm}
            />
          </div>
        </Col>
        <Col span={8}>
          <div className="search-input">
            <span>联系电话：</span>
            <Input name="tel" value={search.tel} onChange={handleSearchForm} />
          </div>
        </Col>
      </Row>
      <Row justify="end">
        <Col>
          <Space size="middle">
            <Button type="primary" onClick={searchData}>
              查询
            </Button>
            <Button onClick={handleResetData}>重置</Button>
          </Space>
        </Col>
      </Row>
    </Space>
  );
};

export default forwardRef(SearchForm);
